<script setup lang="ts">
import { storeToRefs } from 'pinia';

import { bindPhoneStore } from '#/store';

const bindPhone = bindPhoneStore();
const { bindBoxState, binfFromData, getCodeOutTime, getSendCodeState } =
  storeToRefs(bindPhone);
</script>

<template>
  <div>
    <a-modal
      :visible="bindBoxState"
      title="绑定手机号"
      @cancel="bindBoxState = false"
      @ok="bindPhone.bindPhone"
    >
      <a-form>
        <a-form-item label="手机号" name="phone">
          <a-input
            v-model:value="binfFromData.phone"
            placeholder="请输入手机号"
            style="width: 200px"
          />
        </a-form-item>
        <a-form-item label="验证码" name="code">
          <a-space>
            <a-input
              v-model:value="binfFromData.code"
              placeholder="请输入验证码"
              style="width: 200px"
            />
            <a-button
              :disabled="getCodeOutTime > 0"
              :loading="getSendCodeState"
              type="primary"
              @click="bindPhone.sendCode"
            >
              {{
                getCodeOutTime > 0 ? `${getCodeOutTime}s 后获取` : '获取验证码'
              }}
            </a-button>
          </a-space>
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>
